import React, { memo, useEffect } from 'react'
// 引入类型：
import type { ReactNode } from 'react'
// import { getBannerRequest } from './service/recommend'
import { useAppDispatch } from '../../../../store/index'
import { fetchBannerDataAction } from './store/recommend'
import Banner from './components/banner'
import { RecommendWrapper } from './style'

interface IProps {
	children?: ReactNode
}

// 对组件进行类型定义，FC 表示函数式组件（即：FunctionComponents）
const recommend: React.FC<IProps> = () => {
	const dispatch = useAppDispatch()
	useEffect(() => {
		// getBannerRequest().then((res) => {
		// 	console.log(res)
		// })
		dispatch(fetchBannerDataAction())
	}, [])

	return (
		<div>
			<Banner />
			<RecommendWrapper>
				<div className="left">left</div>
				<div className="right">right</div>
			</RecommendWrapper>
		</div>
	)
}

export default memo(recommend)
